<template>
	<div class="overview-bg">
		<div class="overview">
			<div class="header">
				<div class="header-left" @click="closeDialog"></div>
				<div class="header-middle">{{ title }}运营平台</div>
				<div class="header-right">{{ nowTime }}</div>
			</div>
			<div class="main">
				<over-view-left :data="leftMaps"></over-view-left>
				<over-view-middle :data="middleMaps"></over-view-middle>
				<over-view-right :time="nowTime" :data="rightMaps"></over-view-right>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import dayjs from 'dayjs';
	import OverViewLeft from './components/overViewLeft.vue';
	import OverViewMiddle from './components/overViewMiddle.vue';
	import OverViewRight from './components/overViewRight.vue';
	import {
		getStationTotalInfo,
		largeScreeCount,
		connectorMonitoring,
		pagingStationTotal,
		getHistoryTotalInfo,
		tenDayStationTotal,
		orderTotal,
		orderDay,
	} from '@/service/apis/statistical';

	const router = useRouter();
	const winHeight = ref(937);

	const title = import.meta.env.VITE_ENV_NAME;

	const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));

	let timer = ref();
	let requestTimer = ref();

	const leftMaps = reactive({
		todayData: {},
		rankData: [],
		emissionData: {},
	});

	const middleMaps = reactive({
		stationData: {},
		orderData: {},
		pastTenData: {},
	});

	const rightMaps = reactive({
		historyData: {},
		terminalData: {},
		realtimeData: {},
	});

	const setScale = () => {
		let scaleW = window.innerWidth / 1920;
		const winw = window.innerWidth;
		const winh = window.innerHeight;
		winHeight.value = winh;
		if (winw <= 1366) {
			scaleW = 0.71;
		}
		const overviewWrap = document.querySelector('.overview');
		if (overviewWrap) {
			overviewWrap.setAttribute(
				'style',
				`transform: scale(${scaleW.toFixed(5)},${scaleW.toFixed(
					5
				)});transform-origin:left top;background-size:100% 100%;;
      `
			);
		}
	};

	// 关闭大屏
	const closeDialog = () => {
		const channelId = window.localStorage.getItem('channelId');
		if (router.options.history.state.back) {
			router.go(-1);
		} else {
			router.replace({
				name: 'welcome',
				query: { channelId: channelId },
			});
		}
	};

	// 无电站id，今日总览和历史总览
	// 有today查今日总览，无today查历史总览
	const queryStationTotalInfo = (today ?: boolean) => {
		const form : any = {};
		if (today) {
			const fixedTime = dayjs().format('YYYY-MM-DD');
			form.startTime = fixedTime;
			form.endTime = fixedTime;
			getStationTotalInfo(form, false)
				.then((res : any) => {
					leftMaps.todayData = res || {};
				})
				.catch(() => { });
		} else {
			getHistoryTotalInfo(form, false)
				.then((res : any) => {
					rightMaps.historyData = res || {};
				})
				.catch(() => { });
		}
	};

	// 大屏电站数
	const getLargeScreeCount = () => {
		largeScreeCount({})
			.then((res : any) => {
				middleMaps.stationData = res || {};
			})
			.catch(() => { });
	};

	// 大屏终端监控
	const getConnectorMonitoring = () => {
		connectorMonitoring({})
			.then((res : any) => {
				rightMaps.terminalData = res || {};
			})
			.catch(() => { });
	};

	// 大屏昨日排名
	const getPagingStationTotal = () => {
		pagingStationTotal(
			{
				stationGroup: '1',
				stationNames: [],
			},
			{
				pageNo: 1,
				pageSize: 8,
			}
		)
			.then((res : any) => {
				leftMaps.rankData = res || [];
			})
			.catch(() => { });
	};

	// 大屏近10天
	const getTenDayStationTotal = () => {
		tenDayStationTotal({
			stationGroup: '1',
			stationNames: [],
		})
			.then((res : any) => {
				middleMaps.pastTenData = res || [];
			})
			.catch(() => { });
	};

	// 大屏当日订单数 订单总数 碳排放 植树
	const getOrderTotal = () => {
		orderTotal({
			stationGroup: '1',
			stationNames: [],
		})
			.then((res : any) => {
				middleMaps.orderData = res || {};
				leftMaps.emissionData = res || {};
			})
			.catch(() => { });
	};

	// 查询1天的每15分钟对应的订单数
	const getOrderDay = () => {
		orderDay({
			stationGroup: '1',
			stationNames: [],
		})
			.then((res : any) => {
				rightMaps.realtimeData = res || [];
			})
			.catch(() => { });
	};

	const requestAll = () => {
		queryStationTotalInfo(true);
		queryStationTotalInfo();
		getLargeScreeCount();
		getConnectorMonitoring();
		getPagingStationTotal();
		getTenDayStationTotal();
		getOrderTotal();
		getOrderDay();
	};

	const startInterval = () => {
		timer.value = setInterval(() => {
			nowTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
		}, 1000);

		requestTimer.value = setInterval(() => {
			requestAll();
		}, 1000 * 60 * 5);
	};

	onMounted(() => {
		requestAll();
		startInterval();
		setScale();
		window.addEventListener('resize', setScale);
	});
	onUnmounted(() => {
		clearInterval(timer.value);
		timer.value = null;
		clearInterval(requestTimer.value);
		requestTimer.value = null;
		window.removeEventListener('resize', setScale);
	});
</script>
<style lang="scss">
	.overview-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		overflow-x: hidden;
		background-image: url('@/assets/images/overView/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.overview {
			position: absolute;
			z-index: 1;
			width: 1920px;
			height: 1080px;
			display: flex;
			flex-direction: column;

			.header {
				width: 100%;
				height: 154px;
				background-image: url('@/assets/images/overView/header-bg.png');
				background-size: calc(100% - 16px) 100%;
				background-repeat: no-repeat;
				background-position: center center;
				display: flex;
				justify-content: space-between;
				position: relative;
				margin-bottom: -44px;

				&-left {
					margin-left: 39px;
					margin-top: 45px;
					width: 20px;
					height: 20px;
					background-image: url('@/assets/images/overView/close.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					cursor: pointer;
				}

				&-middle {
					position: absolute;
					top: 12px;
					left: 50%;
					transform: translateX(-50%);
					height: 56px;
					line-height: 56px;
					font-size: 43px;
					color: #ffffff;
					background: linear-gradient(0deg, #59c8ff 0%, #fafeff 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				&-right {
					margin-top: 40px;
					margin-right: 33px;
					font-size: 15px;
					color: #eff7ff;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						top: 0px;
						left: -33px;
						width: 20px;
						height: 20px;
						background-image: url('@/assets/images/overView/header-time.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}
				}
			}

			.main {
				display: flex;
				justify-content: space-between;
				flex: 1;
				padding-bottom: 19px;
			}
		}
	}
</style>